<script setup lang="ts">
import localeStore from '@/store/locale'
import { storeToRefs } from 'pinia'
const { localeInfo} = storeToRefs(localeStore())
const route = useRoute()
const router = useRouter()
const breadcrumbData = ref([])


watch(
  () => router.currentRoute.value,
  (newValue: any) => {

    if(newValue.path!=='/') {
      breadcrumbChange(newValue)
    }
    
  },
  { immediate: true }
)

function enClick(name) {
  localeStore().setLocaleType(name)
  breadcrumbChange(route)
}

function topHome(path){
   router.push(path)
   breadcrumbChange(path)
}

function routeClick(item) {
  if(item.route) {
    router.push(item.route)
    breadcrumbChange(item.route)
  }
   
}
function breadcrumbClick(route) {
  router.push(route)
}
function breadcrumbChange(newValue:any) {
  console.log(newValue.path,1)
  if(newValue.path=='/aboutUs') {
    breadcrumbData.value=localeInfo.value.breadcrumbs.about
  } else if(newValue.path=='/Solutions') {
    breadcrumbData.value=localeInfo.value.breadcrumbs.solutions
  } else if(newValue.path=='/Anesthesia') {
    breadcrumbData.value=localeInfo.value.breadcrumbs.anesthesia
  } else if(newValue.path=='/XRay') {
    breadcrumbData.value=localeInfo.value.breadcrumbs.xRay
  } else if(newValue.path=='/Ultrasound') {
    breadcrumbData.value=localeInfo.value.breadcrumbs.ultrasound
  } else if(newValue.path=='/Endoscopy') {
    breadcrumbData.value=localeInfo.value.breadcrumbs.endoscopy
  } else if(newValue.path=='/Surgerydevices') {
    breadcrumbData.value=localeInfo.value.breadcrumbs.surgerydevices
  } else if(newValue.path=='/ElectrosurgicalUnits') {
    breadcrumbData.value=localeInfo.value.breadcrumbs.electrosurgicalUnits
  } else if(newValue.path=='/Monitorsandpumps') {
    breadcrumbData.value=localeInfo.value.breadcrumbs.monitorsandpumps
  } else if(newValue.path=='/Operationlights') {
    breadcrumbData.value=localeInfo.value.breadcrumbs.operationlights
  } else if(newValue.path=='/Operationtables') {
    breadcrumbData.value=localeInfo.value.breadcrumbs.operationtables
  } else if(newValue.path=='/UltrasonicScalpels') {
    breadcrumbData.value=localeInfo.value.breadcrumbs.ultrasonicScalpels
  } else if(newValue.path=='/Service') {
    breadcrumbData.value=localeInfo.value.breadcrumbs.service
  } else if(newValue.path=='/Supports') {
    breadcrumbData.value=localeInfo.value.breadcrumbs.supports
  } else if(newValue.path=='/Supports16') {
    breadcrumbData.value=localeInfo.value.breadcrumbs.supports16
  } else if(newValue.path=='/Supports17') {
    breadcrumbData.value=localeInfo.value.breadcrumbs.supports17
  } else {
    breadcrumbData.value = []
  }
}

</script>

<template>
  <div class="header">
    <div class="en_esp"><span @click="enClick('EN')">EN</span>/<span @click="enClick('ESP')">ESP</span></div>
    <div class="header_tabbar">
      <div class="title_logo" @click="topHome('/home')" >
        <img src="@/assets/img/title_logo.png" alt="">
      </div>
      <div class="dropdown_content">
        <a-dropdown v-for="(item,index) in localeInfo.navTabbarEp" :key="index">
          <a class="ant-dropdown-link" @click="routeClick(item)" >
            {{item.name}}
          </a>
          
          <template #overlay>
            <!-- // @ts-ignore -->
            <a-menu class="child_menu" v-if="item.children&&item.children.length">
              <a-menu-item v-for="(child,cindex) in item.children" :key="'C'+cindex" @click="routeClick(child)">
                <a href="javascript:;">{{child.name}}</a>
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </div>
    </div>
    <div class="breadcrumb" v-if="route.path!=='/home'">
      <a-breadcrumb >
        <a-breadcrumb-item v-for="(item,index) in breadcrumbData" :key="index" @click="breadcrumbClick(item.route)" >
          {{item.name}}
          </a-breadcrumb-item>
       
      </a-breadcrumb>
   
    </div>
       <div v-else style="height:20px"></div>
  </div>
</template>

<style lang="scss" scoped>
.header{
  .en_esp{
    display: flex;
    display: -webkit-flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 12PX;
    padding-right: 8px;
    span{
      font-size: 12PX;
      cursor: pointer;
    }
  }
  .header_tabbar{
    display: flex;
    display: -webkit-flex;
    justify-content: flex-start;
    align-items: center;
     padding:0 8px;
    .title_logo{
     width: 100px;
      img{
        width: 80px;
        cursor: pointer;
      }
    }
    .dropdown_content{
      width: calc(100% - 120px);
      ::v-deep(.ant-dropdown-link){
        font-size: 18PX;
        margin-right: 8px;
        cursor: pointer;
        &:last-child{
          margin-right: 0;
        }
      }
    }
   
  }
  .breadcrumb{
    background-color: rgba(242,242,242,1);
    padding: 0 5px;
    
    ::v-deep(.ant-breadcrumb){
      span,a{
        // color: rgba(137,137,137,1);
        font-size: 18PX;
        cursor: pointer;
        color: rgba(0,0,0,1);
      }
      .ant-breadcrumb-separator{
        margin: 0 3px;
      }
    }
  }
}
 @media screen and (max-width:600px){
       .dropdown_content{
        ::v-deep(.ant-dropdown-link){
          font-size: 12px !important;
        }
       }
    }
</style>
<style lang="scss">
  .child_menu{
    background-color: transparent !important;
    box-shadow:none !important;
  }
</style>
